<template>
<transition
:css="false"
@enter="enter"
@leave="leave"
>
  <div class="list-play" v-show="isShowListPlayer">
    <div class="player-wapper">
      <div class="player-top">
      <div class="top-left">
        <div class="mode loop" @click="mode" ref="mode"></div>
        <p v-if="modeType === 0">顺序播放</p>
        <p v-else-if="modeType === 1">单曲循环</p>
        <p v-else-if="modeType === 2">随机播放</p>
      </div>
      <div class="top-right">
        <div class="del" @click="delAll"></div>
      </div>
    </div>
    <div class="player-middle">
    <ScrollViewVue ref="scrollview">
      <ul ref="play">
        <li class="item" v-for="(item,index) in this.songs" :key="item.id" @click="selectMusic(index)">
          <div class="item-left">
            <div class="item-play" @click.stop="play" v-show="currentIndex === index"></div>
            <p>{{item.name}}</p>
          </div>
          <div class="item-right">
            <div class="item-favorite" @click.stop="itemFavorite(item)" :class="{active:isFavorite(item)}"></div>
            <div class="item-del" @click.stop="del(index)"></div>
          </div>
        </li>
      </ul>
    </ScrollViewVue>
    </div>
    <div class="player-bottom" @click.stop="close">
      <p>关闭</p>
    </div>
    </div>
  </div>
</transition>
</template>

<script>
import { mapGetters,mapActions } from 'vuex'
import ScrollViewVue from '../ScrollView.vue'
import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui'
import modeType from '../../store/modeType'
export default {
  name: 'ListPlayer',
  data() {
    return {
      // isShow:false
    }
  },
  // props:["isShow"],
  computed:{
    ...mapGetters([
      'isPlaying',
      'modeType',
      'isShowListPlayer',
      'songs',
      'currentIndex',
      'currentSong',
      'favoriteList'
    ])
  },
  methods: {
    ...mapActions([
      'setIsPlaying',
      'setModeType',
      'setListPlayer',
      'setDelSong',
      'setCurrentIndex',
      'setFavoriteSong'
    ]),
    close(){
      // this.$emit('closed')
      this.setListPlayer(false)
    },
    // 收藏歌曲功能
    itemFavorite(itemSong){
      this.setFavoriteSong(itemSong)
      // if(this.isFavorite(itemSong)){
      //   this.setFavoriteSong(itemSong)
      // }
    },
    // 定义一个方法判断当前歌有没有被收藏
    isFavorite(song){
      let result = this.favoriteList.find((val) => {
        return val.id === song.id
      })
      return result !== undefined
    },
    // 切换歌曲
    selectMusic(index){
      // 根据下标index
      this.setCurrentIndex(index)
      // console.log(this.currentSong);
    },
    play(){
      this.setIsPlaying(!this.isPlaying)
      // this.setCurrentIndex(index)
      // this.index = index
    },
    mode(){
      if(this.modeType === modeType.loop){
        this.setModeType(modeType.one)
      }else if(this.modeType === modeType.one){
        this.setModeType(modeType.random)
      }else if(this.modeType === modeType.random){
        this.setModeType(modeType.loop)
      }
    },
    enter(el,done){
      Velocity(el,'transition.perspectiveUpIn',{ duration:500 },function(){
        done()
      })
    },
    leave(el,done){
    Velocity(el,'transition.perspectiveUpOut',{ duration:500 },function(){
        done()
      })
    },
    del(ind){
      this.setDelSong(ind)
    },
    delAll(){
      this.setDelSong()
    }
  },
  watch:{
    isPlaying(newValue,oldValue){
        if(newValue){
        // console.log(newValue);
        // console.log(this.$refs.play);
        // console.log(this.$refs.play.classList);
        this.$refs.play.classList.add("active")
      }else{
        this.$refs.play.classList.remove("active")
      }
    },
    modeType(newValue,oldValue){
      if(newValue === 0){
        this.$refs.mode.classList.remove("random")
        this.$refs.mode.classList.add("loop")
      }else if(newValue === 1){
        this.$refs.mode.classList.remove("loop")
        this.$refs.mode.classList.add("one")
      }else if(newValue === 2){
        this.$refs.mode.classList.remove("one")
        this.$refs.mode.classList.add("random")
      }
    },
    isShowListPlayer(newValue,oldValue){
      if(newValue){
        this.$refs.scrollview.refresh()
      }
    }
  },
  components:{
    ScrollViewVue
  }
}
</script>

<style scoped lang="scss">
@import '../../assets/css/variable.scss';
@import '../../assets/css/mixin.scss';
.list-play{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  @include bg_sub_color();
  .player-wapper{
    .player-top{
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .top-left{
        display: flex;
        align-items: center;
        padding-left: 20px;
        .mode{
          width: 56px;
          height: 56px;
          margin-right: 20px;
          &.loop{
            @include bg_img('../../assets/images/small_loop')
          }
          &.one{
            @include bg_img('../../assets/images/small_one')
          }
          &.random{
            @include bg_img('../../assets/images/small_shuffle')
          }
        }
        p{
          @include font_color();
          @include font_size($font_medium_s)
        }
      }
      .top-right{
        .del{
          width: 84px;
          height: 84px;
          @include bg_img('../../assets/images/small_del')
        }
      }
    }
    .player-middle{
      height: 700px;
      overflow: hidden;
      @include bg_sub_color();
      border-top: 1px solid #ccc;
      ul{
        &.active{
          .item{
            .item-play{
              @include bg_img('../../assets/images/small_pause');
            }
          }
        }
      }
      .item{
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
      .item-left{
        display: flex;
        align-items: center;
        .item-play{
          width: 56px;
          height: 56px;
          margin-right: 20px;
          @include bg_img('../../assets/images/small_play');
          }
          p{
            @include font_color();
            @include font_size($font_medium_s)
          }
        }
        .item-right{
        display: flex;
        align-items: center;
        .item-favorite{
          width: 56px;
          height: 56px;
          @include bg_img('../../assets/images/small_un_favorite');
          &.active{
            @include bg_img('../../assets/images/small_favorite');
          }
          }
        .item-del{
          width: 52px;
          height: 52px;
          margin-left: 20px;
          @include bg_img('../../assets/images/small_close')
          }
        }
      }
    }
    .player-bottom{
      width: 100%;
      height: 100px;
      @include bg_color();
      line-height: 100px;
      // display: flex;
      // flex-direction: column;
      // justify-content: center;
      p{
        color: #fff;
        text-align: center;
        @include font_size($font_medium)
      }
    }
  }
}
</style>
